import { View } from 'react-native';
import React from 'react';

import * as Animatable from 'react-native-animatable';
import { styles } from './MyStyle';

// 定义基本组件
const View01 = () => {
  return (
    <View style={styles.box1}>
      <View style={styles.innerBox} />
    </View>
  );
};

// https://github.com/oblador/react-native-animatable

// 主组件实现
export const Test3001 = () => {
  return (
    <View style={styles.container}>
      <Animatable.View
        animation={{
          0: { transform: [{ translateX: 0 }] },    // 起始位置
          0.45: { transform: [{ translateX: 10 }] }, // 中间位置
          0.5: { transform: [{ translateX: 200 }] }, // 中间位置
          1: { transform: [{ translateX: 0 }] },    // 返回起始位置
        }}
        duration={1000}
        iterationCount="infinite"
        // easing="linear"
        style={styles.box1}
      >
        <View01 />
      </Animatable.View>
    </View>
  );
};
